<template>
    <div>
      <m-header class="header"></m-header>
      <div class="con">
        <div class="source-item">
          <h2>学习路径</h2>
          <div class="source-item-panel">
            <ul>
              <li>web前端</li>
              <li>java</li>
              <li>Android</li>
              <li>unity游戏开发</li>
              <li>ui美工设计</li>
              <li>算法</li>
              <li>书数据挖掘</li>
              <li>php后台</li>
              <li>大数据</li>
              <li>人工智能</li>
            </ul>
          </div>
        </div>
        <hr>
        <div class="source-item">
          <h2>工具</h2>
          <div class="source-item-panel">
            <div>
              <h3>IDE/编辑器</h3>
              <ul>
                <li>web前端</li>
                <li>java</li>
                <li>Android</li>
                <li>unity游戏开发</li>
                <li>ui美工设计</li>
              </ul>
            </div>
            <div>
              <h3>浏览器</h3>
              <ul>
                <li>Chrome</li>
                <li>Firox</li>
                <li>IE</li>
                <li>Safari</li>
                <li>Opera</li>
              </ul>
            </div>
            <div>
              <h3>团队协作</h3>
              <ul>
                <li>git</li>
                <li>svn</li>
                <li>github</li>
                <li>码云</li>
              </ul>
            </div>
        </div>
      </div>
        <hr>
        <div class="source-item">
          <h2>书籍（PDF）</h2>
          <div class="source-item-panel">
            <ul>
              <li>Android第一行代码</li>
              <li>javaScript权威指南</li>
              <li>javaScript高级程序设计</li>
              <li>http权威指南</li>
              <li>javaScript DOM 编程编程艺术</li>
              <li>ES6标准入门</li>
              <li>你不知道的javaScript</li>
              <li>剑指offer</li>
              <li>javaScript忍忍者秘籍</li>
              <li>深入浅出node.js</li>
              <li>算法竞赛入门</li>
            </ul>
          </div>
        </div>
        <hr>
        <div class="source-item">
          <h2>视频资料</h2>
          <div class="source-item-panel">
            <div>
              <h3>前端</h3>
              <ul>
                <li>入门</li>
                <li>vue</li>
                <li>webpack</li>
              </ul>
            </div>
            <div>
              <h3>安卓</h3>
              <ul>
                <li>入门</li>
                <li>实战</li>
                <li>webpack</li>
              </ul>
            </div>
            <div>
              <h3>unity</h3>
              <ul>
                <li>入门</li>
                <li>实战</li>
                <li>webpack</li>
              </ul>
            </div>
            <div>
              <h3>算法</h3>
              <ul>
                <li>数据结构</li>
                <li>面试算法</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import MHeader from './MHeader'
  export default {
    name: "learn-way",
    components: {
      MHeader
    }
  }
</script>

<style scoped lang="stylus">
  @import "../stylus/variable.styl"
  .header
    background-color $color-theme
    height $header-light
  .con
    padding-top $header-light+10px
    min-width 960px
    width 70%
    margin auto
    padding-bottom 20px
    hr
      border-width 1px
      border-style inset
      unicode-bidi isolate
  .source-item
    border-bottom 1px solid #c0c0c0
    padding 20px
    padding-bottom 0
  .source-item-panel
    padding 20px
    padding-bottom 0
    h3
      margin-bottom 10px
      margin-left 20px
    ul
      display inline-block
      li
        float left
        font-size 20px
        border 1px solid #0e90d2
        border-radius 5px
        padding 10px
        cursor pointer
        margin-left 20px
        margin-bottom 20px
        transition all linear .1s
      li:hover
        box-shadow 0 0 8px #444
        transform translateY(-4px)


</style>
